<template>
  <!-- 列表详细 -->
  <div class="big_box" v-if="banner.bannercontent">
    <!-- 轮播 -->
    <div class="swipe">
      <van-swipe @change="onChange" :height="375" :autoplay="2000">
        <van-swipe-item v-for="(item, index) in banner.bannerImg" :key="index">
          <img :src="item" alt />
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">{{ current + 1 }}/{{ banner.bannerLengt }}</div>
        </template>
      </van-swipe>
    </div>

    <!-- 最顶部 -->
    <div class="heard">
      <div class="return" @click="gobackFn">
        <van-icon name="arrow-left" />
      </div>
      <div class="cart">
        <router-link :to="{ name: 'cart' }">
          <van-icon name="shopping-cart-o" />
        </router-link>
      </div>
    </div>
    <!-- 底部加入购物车 -->
    <div class="bottom">
      <van-goods-action>
        <van-goods-action-icon icon="shop-o" text="店铺" color="#ff5000" />
        <van-goods-action-icon icon="chat-o" text="客服" color="#999" />
        <van-goods-action-icon icon="star-o" text="收藏" color="#999" />
        <van-goods-action-button
          type="warning"
          text="加入购物车"
          @click="pushCart(banner.bannercontent.goodsId)"
        />
        <van-goods-action-button type="danger" color="#FE560A" text="立即购买" />
      </van-goods-action>
    </div>
    <div class="box">
      <div class="box_top">
        <div class="price">
          <span>￥</span>
          <strong>{{ banner.bannercontent.price }}</strong>
          <em>优惠促销</em>
          <p>
            价格 ￥
            <del>{{ banner.bannercontent.price2 }}</del>
          </p>
        </div>
        <div class="title">
          <p>{{ banner.bannercontent.title }}</p>
          <span class="iconfont icon-share_icon">分享</span>
        </div>
        <!-- 产地 -->
        <div class="Place">
          <span>快递: 快递包邮</span>
          <span>销量{{ banner.bannercontent.goodComments }}</span>
          <span>广东广州</span>
        </div>
      </div>
      <div class="hr"></div>
      <!-- 服务到参数 -->
      <div class="service">
        <span>服务</span>
        <strong>订单险 · 7天无理由 · 运费险</strong>
        <em>
          <van-icon name="arrow" />
        </em>
      </div>
      <div class="hr"></div>
      <div class="service">
        <span>规格</span>
        <strong>请选择 尺寸/加工方式 颜色分类</strong>
        <em>
          <van-icon name="arrow" />
        </em>
      </div>
      <div class="service">
        <span>参数</span>
        <strong>材质 颜色分类...</strong>
        <em>
          <van-icon name="arrow" />
        </em>
      </div>
      <div class="hr"></div>
      <!-- 评价 -->
      <div class="evaluate">
        <span>宝贝评价({{ banner.bannercontent.comment }})</span>
        <p>
          查看全部
          <van-icon name="arrow" />
        </p>
      </div>
      <!-- 问大家 -->
      <div class="evaluate">
        <span>问大家(0)</span>
        <p>
          查看全部
          <van-icon name="arrow" />
        </p>
      </div>
      <div class="hr"></div>

      <!-- 店铺 -->
      <div class="shop">
        <div class="shop_top">
          <div class="shop_left">
            <img src="@/assets/images/index/logo.png" alt />
            <h2>{{ banner.bannercontent.shops }}</h2>
          </div>
          <div class="shop_right">
            <span>全部宝贝</span>
            <strong>进店逛逛</strong>
          </div>
        </div>

        <div class="shop_information">
          <p>
            宝贝描述
            <span>4.8 平</span>
          </p>
          <p>
            卖家服务
            <span>4.8 高</span>
          </p>
          <p>
            物流服务
            <span>4.8 高</span>
          </p>
        </div>
      </div>
      <!-- 详细 -->
      <div class="divide-box">
        <van-divider :style="{ color: '#999', borderColor: '#999', padding: '0 100px' }">详细</van-divider>
      </div>
      <!-- 详细介绍 -->
      <div class="detailed-img" v-for="item in banner.bannerdetailed" :key="item">
        <img :src="item" alt />
      </div>
    </div>
  </div>
</template>

<script>
import indexApi from "@/api/indexApi.js";
import { getUser } from "@/utils/auth";
export default {
  data() {
    return {
      current: 1,
      banner: {
        bannercontent: null,
        bannerLengt: null,
        bannerImg: null,
        bannerdetailed: null
      },

      detailed: [
        require("@/assets/images/index/branch1.jpg"),
        require("@/assets/images/index/branch2.jpg"),
        require("@/assets/images/index/branch3.jpg"),
        require("@/assets/images/index/branch4.jpg"),
        require("@/assets/images/index/branch5.jpg"),
        require("@/assets/images/index/branch6.jpg"),
        require("@/assets/images/index/branch7.jpg"),
        require("@/assets/images/index/branch8.jpg")
      ],
      goodsContent: null,
      listUrl: null,
      nameinf: null
    };
  },

  components: {},

  methods: {
    onChange(index) {
      this.current = index;
    },
    goodsLists(goodsID) {},
    gobackFn() {
      this.$router.go(-1);
    },
    async pushCart(goodsID) {
      if (this.nameinf) {
        let p = await indexApi.addGoodsCart(goodsID, this.nameinf.username);
        console.log(p);
        if (p.data.flag) {
          this.$notify({ type: "primary", message: "加入购物车成功" });
        } else {
          this.$notify({ type: "warning", message: "加入购物车失败" });
        }
      } else {
        this.$notify({ type: "warning", message: "请登录" });
        return;
      }
    }
  },
  created() {
    this.listUrl = this.$route.query.id;
    if (this.listUrl) {
      //this.goodsLists(this.listUrl);
      indexApi.getGoodsId(this.listUrl).then(p => {
        if (p.data.flag) {
          this.banner.bannercontent = p.data.data[0];
          this.banner.bannerImg = JSON.parse(p.data.data[0].bannerImg);
          this.banner.bannerdetailed = JSON.parse(p.data.data[0].detailed);
          this.banner.bannerLengt = this.banner.bannerImg.length;
          console.log(this.banner.bannercontent);
        } else {
          this.$notify({ type: "danger", message: "获取不了数据" });
        }
      });
    }
    this.nameinf = JSON.parse(getUser()) || null;
  }
};
</script>

<style scoped lang="scss">
// 最外盒子
.big_box {
  width: 100%;
  height: auto;
  overflow: auto;
  padding-bottom: 50px;
}
.swipe {
  width: 100%;
  height: 374px;
}
//  <!-- 最顶部 -->
.heard {
  position: fixed;
  top: 10px;
  display: flex;
  justify-content: space-between;

  div {
    text-align: center;
    font-size: 25px;
    color: #fff;
    line-height: 40px;
    height: 35px;
    width: 35px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.4);
  }
  .return {
    position: absolute;
    left: 10px;
  }
  .cart {
    position: absolute;
    left: 335px;
  }
}

.van-swipe-item img {
  width: 100%;
  height: 374px;
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}

// 轮播以下
.bottom {
  height: auto;
  .van-goods-action {
    opacity: 1;
    z-index: 999;
  }
}
.box {
  background-color: #fff;
  width: 100%;
  height: auto;
  //   价格到产地
  .box_top {
    padding: 15px 10px;
    .price {
      span {
        display: inline-block;
        font-size: 0.15rem;
        color: #ff5000;
      }
      strong {
        color: #ff5000;
        font-size: 24px;
      }
      em {
        margin-left: 10px;
        font-size: 9px;
        line-height: 1;
        color: #ff5000;
      }
      p {
        color: #999;
        font-size: 12px;
        margin-bottom: 3px;
      }
    }

    .title {
      font-size: 15px;
      overflow: hidden;
      color: rgb(51, 51, 51);
      font-weight: bold;
      visibility: visible;
      display: flex;
      justify-content: space-between;
      p {
        display: block;
        width: 300px;
      }
      span {
        margin-top: 5px;
        font-size: 12px;
        padding: 2px 0;
        height: 24px;
        line-height: 20px;
        border-radius: 12px;
        color: #999;
        background-color: rgb(243, 243, 243);
      }
    }
    .Place {
      display: flex;
      margin: 10px 0;
      font-size: 12px;
      justify-content: space-between;
      color: #999;
    }
  }
  .hr {
    width: 375px;
    height: 10px;
    background-color: #f2f2f2;
  }

  .service {
    line-height: 45px;
    padding: 0 10px;
    position: relative;
    height: 45px;
    font-size: 13px;
    span {
      position: absolute;
      left: 10px;
      color: #999;
    }
    strong {
      position: absolute;
      left: 50px;
      color: #333;
    }
    em {
      font-size: 14px;
      position: absolute;
      right: 10px;
    }
  }
  .evaluate {
    padding: 0 10px;
    display: flex;
    height: 44px;
    line-height: 44px;
    justify-content: space-between;
    border-bottom: 1px solid #f2f2f2;
    span {
      font-size: 14px;
      color: f333;
    }
    p {
      font-size: 13px;
      color: #ff5000;
    }
  }

  // <!-- 店铺 -->
  .shop {
    padding: 0 10px;
    .shop_top {
      display: flex;
      justify-content: space-between;
      .shop_left {
        display: flex;
        img {
          height: 49px;
          width: 49px;
          margin-right: 10px;
        }
        h2 {
          font-size: 14px;
          line-height: 30px;
        }
      }
      .shop_right {
        display: flex;
        text-align: center;
        font-size: 12px;
        span {
          margin-top: 20px;
          display: block;
          width: 65px;
          height: 24px;
          line-height: 24px;
          border-radius: 12px;
          color: rgb(255, 80, 0);
          border: solid 1px rgb(255, 80, 0);
        }
        strong {
          margin-top: 20px;
          margin-left: 15px;
          display: block;
          width: 65px;
          height: 24px;
          line-height: 24px;
          overflow: hidden;
          border-radius: 12px;
          color: #fff;
          background-color: rgb(255, 80, 0);
        }
      }
    }
  }

  .shop_information {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #999;
    height: 50px;
    line-height: 40px;
    p {
      span {
        color: #ff5000;
      }
    }
  }

  .divide-box {
    height: 40px;
    background-color: #f2f2f2;
    .van-divider {
      line-height: 40px;
    }
  }
  .detailed-img {
    width: 375px;
    height: auto;
    img {
      width: 375px;
      height: auto;
    }
  }
}
</style>
